<template>
	<div class="container">
		<el-card shadow="hover" class="mb15">
			<el-form :inline="true" :model="tableData.param" size="default">
				<el-form-item label="状态">
					  <el-radio-group v-model="tableData.param.status">
					     <el-radio :label="''">全部</el-radio>
					     <el-radio :label="0">修改中</el-radio>
					     <el-radio :label="1">待审核</el-radio>
						  <el-radio :label="2">通过审核</el-radio>
					   </el-radio-group>
				</el-form-item>
				<el-form-item label="关键字">
					<el-input v-model="tableData.param.kw" placeholder="请输入关键字" v-on:keyup.enter="searchData"
						size="default"/>
				</el-form-item>
				<el-form-item>
					<el-button size="default" type="primary" @click="searchData">
						<el-icon>
							<Search />
						</el-icon>
						查询
					</el-button>
				</el-form-item>
			</el-form>
		</el-card>
 
		<el-card shadow="hover">
			<div class="mb15 my-w-e-toolbar">
				 
				<el-button size="default" @click="onOpenEdit" :disabled="currentRow===null">
					查看资料
				</el-button>
				<el-button size="default" class="ml10" @click="onOpenPermissionsEdit" :disabled="currentRow===null">
					设置权限
				</el-button>
				 
				<el-button size="default" class="ml10" @click="onChangeStatus"
					:disabled="currentRow===null || currentRow.Status===0 | currentRow.Status===1">
					{{currentRow===null?'审核操作':(currentRow.Status===1?'通过审核':'审核操作')}}
				</el-button>
				
			</div>
			<el-table v-loading="tableData.loading" :data="tableData.data" style="width: 100%" highlight-current-row
				@current-change="handleCurrentChange">
				<el-table-column prop="Name" label="企业名称" show-overflow-tooltip ></el-table-column>
				<el-table-column prop="Area" label="地区" show-overflow-tooltip width="140"></el-table-column>
				<el-table-column prop="Status" label="状态" show-overflow-tooltip width="80">
					<template #default="scope">
						<span v-if="scope.row.Status === 0"> 修改中 </span>
						<span v-if="scope.row.Status === 1"> 待审核 </span>
						<span v-if="scope.row.Status === 2"> 通过审核 </span>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
				:pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="tableData.param.page" background
				v-model:page-size="tableData.param.pageSize" layout="total, sizes, prev, pager, next, jumper"
				:total="tableData.total">
			</el-pagination>
		</el-card>
	 
	</div>
</template>

<script lang="ts">
	import {
		toRefs,
		reactive,
		onMounted,
		ref
	} from 'vue';
	import { usePageApis } from '/@/api/EnterpriseMange/index';
	import {
		ElMessageBox,
		ElMessage
	} from 'element-plus';
	 

	import {
		deepClone
	} from '/@/utils/other';
	export default {
		name: '',
		components: {
			 
		},

		setup() {
			const APIList=usePageApis();
			const FormRef = ref();
			const PermissionsFormRef = ref();
			const MembersRef = ref();
			const currentRow = ref(null)
			const state: any = reactive({
				tableData: {
					data: [],
					total: 0,
					loading: false,
					param: {
						page: 1,
						pageSize: 10,
						kw: '',
						status:'',
					},
				},
			});
			onMounted(() => {
				loadData();
			});
			const searchData = () => {
				state.tableData.param.page = 1;
				loadData();
			};
			const loadData = () => {
				state.tableData.loading = true;
				let param: object = state.tableData.param;

				APIList.getlistAPI(param).then(async (response) => {
					//console.log(response);
					if (response.code === 0) {
						state.tableData.data = response.result.data;
						state.tableData.total = response.result.total;
						state.tableData.param.page = response.result.current_page;
					}

				}).finally(() => {
					state.tableData.loading = false;
				});
			};
			// 打开新增用户弹窗
			const onOpenAdd = () => {
				FormRef.value.openDialog({
						ID: '0',
						Name: '',
						Description: '',
						AllowAppendMembers: true,
					},
					searchData
				);
			};
			const handleCurrentChange = (row: Object) => {
				currentRow.value = row
			}
			// 打开修改用户弹窗
			const onOpenEdit = () => {
				FormRef.value.openDialog(deepClone(currentRow.value), loadData);
			};
			const onOpenPermissionsEdit = () => {

				PermissionsFormRef.value.openDialog(deepClone(currentRow.value), null);
			};

			//启用禁用
			const onChangeStatus = () => {
				let API = currentRow.value.Status === 0 ? disableAPI : enableAPI;
				API({
					ID: currentRow.value.ID,
				}).then(async (response) => {
					if (response['code'] === 0) {
						loadData();
						ElMessage.success(`${response.message}`);
					}
				});
			};
			const onRowDelete = () => {
				ElMessageBox.confirm('本次操作将会删除 ' + currentRow.value.Name + " 的所有数据，是否继续？")
					.then(() => {
						delAPI({
							ID: currentRow.value.ID,
						}).then(async (response) => {
							if (response['code'] === 0) {
								loadData();
								ElMessage.success(`${response.message}`);
							}
						});
					})
					.catch(() => {

					})

			};

			// 分页改变
			const onHandleSizeChange = (val: number) => {
				state.tableData.param.pagesize = val;
				loadData();
			};
			// 点击页码
			const onHandleCurrentChange = (val: number) => {
				state.tableData.param.page = val;
				loadData();
			};

			const onOpenMembersEdit = () => {
				MembersRef.value.openDialog(deepClone(currentRow.value), null);
			};
			return {
				onOpenAdd,
				...toRefs(state),
				searchData,
				onOpenEdit,
				FormRef,
				onHandleCurrentChange,
				onHandleSizeChange,
				PermissionsFormRef,
				onOpenPermissionsEdit,
				MembersRef,
				onOpenMembersEdit,
				onRowDelete,
				handleCurrentChange,
				currentRow,
				onChangeStatus
			};
		},
	};
</script>

<style scoped lang="scss">
	.container {}

	.my-w-e-toolbar {
		text-align: right;
	}
</style>
